import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    FlatList,
    StatusBar,
    TextInput,
    ScrollView,
    Picker,
    DeviceEventEmitter
} from 'react-native';
import { base } from "../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import ReactNativePickerSelect from 'react-native-picker-select'
import {getUserInfo, getUserInfoStorage} from "../../../utils/login";
import {getBankBin} from "../../../utils/card";
import {DeviceStorage} from "../../../utils/DeviceStorage";
import Confirm from '../../../components/confirm/Confirm'
import { API } from "../../../api";
import Toast from "react-native-easy-toast";
import Loading from "../../../components/loading/index";
import { i18n } from "../../../utils/locales/i18n";

type Props = {};
export default class PayWay extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
                title: i18n.t('pay_way'),
                headerStyle: {
                },
                headerTintColor: '#0f0f0f',
                headerBackTitle: null,
                headerRight: <TouchableOpacity onPress={() => navigation.navigate('AddCreditCard')}><View style={{ paddingRight: 10 }}><Text style={{color: '#ff7606'}}>+ {i18n.t('i225')}</Text></View></TouchableOpacity>
            }
    }
    constructor() {
        super();
        this.state = {
            userInfo: '',
            showConfirm: false,
            currentSelectedIndex: '',
            modalVisible: false,
            currentToastInfo: ''
        }
    }
    componentDidMount(): void {
        DeviceEventEmitter.addListener('refresh_user_info', async () => {
            // 刷新storage里面的
            await this._getUserInfo()
            await this._initUserInfo()
        })
        this._initUserInfo()
    }
    _getUserInfo = async () => {
        this.setState({
            userInfo: ''
        })
        await getUserInfo()
    }
    _initUserInfo = async () => {
        const userInfo = await getUserInfoStorage()
        if (userInfo.BankInfo && userInfo.BankInfo.length > 0) {
            try {
                userInfo.BankInfo.map(async item => {
                    // Id: 14
                    // Name: "臭弟弟"
                    // Number: "6228481200290317812"
                    // Uid: 0
                    try {
                        item.Bank = await getBankBin(item.Number)
                    } catch (e) {
                        item.Bank =
                            {
                                bankName: i18n.t('un_r'),
                                bankCode: "",
                                cardType: "",
                                cardTypeName: "---"
                            }
                    }
                    item.key = item.Number
                })
            } catch (e) {
                console.log(e);
            }
        }
        setTimeout(() => {
            this.setState({
                userInfo
            })
            console.log('userInfo', userInfo);
        }, 10)
    }
    showConfirm = (id) => {
        this.setState({
            currentSelectedIndex: id,
            showConfirm: true
        })
    }
    // 执行删除银行卡
    deleteBank = async (id) => {
        this.setState({ showConfirm: false })
        const res = await API._fetch('deleteBank', {
            id: Number(id)
        })
        if (res && res.code === 10000) {
            this.refs.toast.show(res.msg || i18n.t('o_success'))
            setTimeout(async () => {
                await this._getUserInfo()
                await this._initUserInfo()
            }, 1000)
        } else {
            this.refs.toast.show(res.msg || i18n.t('o_defeat'))
        }
    }
    render() {
        return (
            <View style={[base.flex_1, base.bg_gray]}>
                {/*toast*/}
                <Toast ref="toast" position='bottom' positionValue={200}/>
                { this.state.modalVisible ? (
                    <Loading
                        info={this.state.currentToastInfo}
                    />) : null }
                <Confirm
                    modalVisible={this.state.showConfirm}
                    negative={i18n.t('cancel')}
                    positive={i18n.t('confirm')}
                    title={i18n.t('info')}
                    handleCancelOrder={ () => this.setState({ showConfirm: false }) }
                    handleConfirmOrder={() => this.deleteBank(this.state.currentSelectedIndex)}
                >
                    <View style={[base.flex_1, base.flex_col_center]}>
                        <Text>{ i18n.t('info20') }</Text>
                    </View>
                </Confirm>
                <ScrollView style={[base.flex_1, base.content_container, { paddingVertical: 15, height: '100%' }]}>
                    { (this.state.userInfo && this.state.userInfo.BankInfo && this.state.userInfo.BankInfo.length > 0) ? this.state.userInfo.BankInfo.map((item, index) => {
                        if ( index % 3 === 0 ) {
                            return (
                                <LinearGradient
                                    key={index}
                                    start={{x: 0, y: 0.5}}
                                    end={{x: 1, y: 0.5}}
                                    colors={['#658cea', '#4c77de']}
                                    style={[base.flex_col_between, { width: '100%', height: 130, borderRadius: 6, marginBottom: 20 }]}
                                >
                                    <View style={[base.flex_col_between, { width: '100%', paddingVertical: 10, paddingHorizontal: 15 }]}>
                                        <View style={[base.flex_row_between, { width: '100%', height: 30, position: 'relative' }]}>
                                            <View><Text style={[base.color_white, { fontSize: 16 }]}>{item.Bank.bankName}</Text></View>
                                            {/*<View style={{ transform: [{translateX: -20}] }}><Text style={[base.color_white, { fontSize: 12 }]}>江苏省无锡分行</Text></View>*/}
                                            {/*checkbox*/}

                                            <TouchableOpacity onPress={() => { this.showConfirm(item.Id) }}>
                                                <View style={[base.flex_row_end]}>
                                                    <Text style={[base.color_white, { fontSize: 13 }]}>{ i18n.t('del') }</Text>
                                                </View>
                                            </TouchableOpacity>
                                            <View style={{ position: 'absolute', top: 30, left: 0 }}>
                                                <Text style={[base.color_white, { fontSize: 12 }]}>{item.Bank.cardTypeName}</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <View style={[base.flex_row_start, { width: '100%', paddingBottom: 15, paddingLeft: 15 }]}>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>****</Text></View>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>****</Text></View>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>****</Text></View>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>{ item.Number.slice(item.Number.length - 4, item.Number.length) }</Text></View>
                                    </View>
                                    <View style={{position: 'absolute', right: -10, bottom: -10}}>
                                        <Text style={[base.color_white, { fontSize: 55, color: 'rgba(255, 255, 255, 0.1)' }]}>{item.Bank.bankCode}</Text>
                                    </View>
                                </LinearGradient>
                            )
                        } else if (index % 2 === 0) {
                            return (
                                <LinearGradient
                                    key={index}
                                    start={{x: 0, y: 0.5}}
                                    end={{x: 1, y: 0.5}}
                                    colors={['#fca05d', '#eb8439']}
                                    style={[base.flex_col_between, { width: '100%', height: 130, borderRadius: 6, marginBottom: 20 }]}
                                >
                                    <View style={[base.flex_col_between, { width: '100%', paddingVertical: 10, paddingHorizontal: 15 }]}>
                                        <View style={[base.flex_row_between, { width: '100%', height: 30, position: 'relative' }]}>
                                            <View><Text style={[base.color_white, { fontSize: 16 }]}>{item.Bank.bankName}</Text></View>
                                            {/*<View style={{ transform: [{translateX: -20}] }}><Text style={[base.color_white, { fontSize: 12 }]}>江苏省无锡分行</Text></View>*/}
                                            {/*checkbox*/}

                                            <TouchableOpacity onPress={() => { this.showConfirm(item.Id) }}>
                                                <View style={[base.flex_row_end]}>
                                                    <Text style={[base.color_white, { fontSize: 13 }]}>{i18n.t('del')}</Text>
                                                </View>
                                            </TouchableOpacity>
                                            <View style={{ position: 'absolute', top: 30, left: 0 }}>
                                                <Text style={[base.color_white, { fontSize: 12 }]}>{item.Bank.cardTypeName}</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <View style={[base.flex_row_start, { width: '100%', paddingBottom: 15, paddingLeft: 15 }]}>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>****</Text></View>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>****</Text></View>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>****</Text></View>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>{ item.Number.slice(item.Number.length - 4, item.Number.length) }</Text></View>
                                    </View>
                                    <View style={{position: 'absolute', right: -10, bottom: -10}}>
                                        <Text style={[base.color_white, { fontSize: 55, color: 'rgba(255, 255, 255, 0.1)' }]}>{item.Bank.bankCode}</Text>
                                    </View>
                                </LinearGradient>
                            )
                        } else {
                            return (
                                <LinearGradient
                                    key={index}
                                    start={{x: 0, y: 0.5}}
                                    end={{x: 1, y: 0.5}}
                                    colors={['#ec7667', '#eb4e39']}
                                    style={[base.flex_col_between, { width: '100%', height: 130, borderRadius: 6, marginBottom: 20 }]}
                                >
                                    <View style={[base.flex_col_between, { width: '100%', paddingVertical: 10, paddingHorizontal: 15 }]}>
                                        <View style={[base.flex_row_between, { width: '100%', height: 30, position: 'relative' }]}>
                                            <View>
                                                <Text style={[base.color_white, { fontSize: 16 }]}>{item.Bank.bankName}</Text>
                                            </View>
                                            {/*<View style={{ transform: [{translateX: -20}] }}>*/}
                                                {/*<Text style={[base.color_white, { fontSize: 12 }]}>江苏省无锡分行</Text>*/}
                                            {/*</View>*/}
                                            {/*checkbox*/}
                                            <TouchableOpacity onPress={() => { this.showConfirm(item.Id) }}>
                                                <View style={[base.flex_row_end]}>
                                                    <Text style={[base.color_white, { fontSize: 13 }]}>{ i18n.t('del') }</Text>
                                                </View>
                                            </TouchableOpacity>
                                            <View style={{ position: 'absolute', top: 30, left: 0 }}>
                                                <Text style={[base.color_white, { fontSize: 12 }]}>{item.Bank.cardTypeName}</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <View style={[base.flex_row_start, { width: '100%', paddingBottom: 15, paddingLeft: 15 }]}>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>****</Text></View>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>****</Text></View>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>****</Text></View>
                                        <View style={{paddingRight: 12}}><Text style={[base.color_white, { fontSize: 22 }]}>{ item.Number.slice(item.Number.length - 4, item.Number.length) }</Text></View>
                                    </View>
                                    <View style={{position: 'absolute', right: -10, bottom: -10}}>
                                        <Text style={[base.color_white, { fontSize: 55, color: 'rgba(255, 255, 255, 0.1)' }]}>{item.Bank.bankCode}</Text>
                                    </View>
                                </LinearGradient>
                            )
                        }
                    }) : (
                        <View style={[base.flex_1, base.flex_col_center, {height: '100%'}]}>
                            <Image style={{width: 160, height: 160}} source={require('@images/mine/bank_empty.png')} resizeMode={'contain'}/>
                            <Text style={[base.color_orange]}>{ i18n.t('info21') }</Text>
                        </View>
                    ) }
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
